<style>
  .avatar-img {
    width: 280px;
    height: 300px;
  }



  :last-child {
    margin-bottom: 0;
  }



  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: rgb(9, 3, 29);
  }

  .bg-purple-light {
    background: #f276a3;
  }

  .el-tag {
    margin-left: 10px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .ele-txt {
    font-size: 20px;
    vertical-align: middle;
    line-height: 2;
  }

  .data-form {
    width: 60%;
    margin: auto;
    text-align: center;
  }
  .special-label{
    margin: auto;
    width: 50%;
    text-align: center;
  }
</style>
<template>
  <el-dialog :title="'用户详情'" :visible.sync="dialogFormVisible">
    <div>
      <el-row :gutter="20">
        <el-col :span="9">
          <div class="grid-content">
            <el-image :src="userInfo.avatar"  fit="fill" class="avatar-img"></el-image>
          </div>
        </el-col>
        <el-col :span="5" v-for="res in userResources">
          <div class="grid-content">
            <el-image style="width: 150px; height: 150px" :src="res.url" fit="fill"></el-image>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content ">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  <span v-text="'用户id：'+ userData.userId"></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  <span v-text="'昵称：'+ userInfo.nickname"></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  最近登陆：<span v-text="userData.lastLoginTime ? userData.lastLoginTime:''"></span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="grid-content ">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  生肖：<span v-text=" userInfo.zodiac"></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  星座：<span v-text=" userInfo.constellation"></span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="grid-content ">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="grid-content  ele-txt">
                  <span v-text="'设备：'+ enums.DeviceType[userData.deviceType]"></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content  ele-txt">
                  <span v-text="'机型：'+ userData.modelType"></span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content ele-txt">
                  <span v-text="'版本：'+ userData.version"></span>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
          <div class="grid-content ">
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="grid-content ele-txt">
                  <span v-text="'聊天id：'+ userData.chatId"></span>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="grid-content ">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="grid-content ele-txt">
                  注册时间：<span v-text=" userData.createTime"></span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content ele-txt">
                  出生日期：<span v-text=" userInfo.birthday"></span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-divider>标签</el-divider>
    <div id="label" class="special-label" v-if="labels.length>0">
       <el-tag  size="medium" v-for="item in labels" :key="item" effect="dark">
         {{item}}
       </el-tag>
    </div>
    <div id="data-form" class="data-form">
      <el-row :gutter="20">
        <el-col :span="12" v-for="item in userForm" >
          <div class="ele-txt grid-content bg-purple" style="margin-top:10px;">
            <span v-text=" item.code"></span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div id="tab">
      <el-tabs v-model="tabActiveName" @tab-click="tabClick">
        <el-tab-pane label="用户评价" name="first" >
          <user-comment ref="comment"></user-comment>
        </el-tab-pane>
        <el-tab-pane label="举报内容" name="second">
          配置管理
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" >取 消</el-button>
      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import global from '../../../common/enum'
  import UserComment from './user-comment'
  export default {
    name: "user-detail",
    components:{
      UserComment
    },
    mounted(){

    },
    methods: {
      details(userId) {
        this.userId = userId;
        this.$http({
          url: this.$http.adornUrl(`/simida/userinfo/info/` + userId),
          method: 'get',
          params: this.$http.adornParams({}, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dialogFormVisible = true;
            this.userData = data.userInfo.userData;
            this.userInfo = data.userInfo.info;
            this.userForm = data.userInfo.userForms;
            this.matchSettings = data.userInfo.matchSettings;
            this.userResources = data.userInfo.resources;
            this.splitLabel();
            //加载tab页内容
            this.changeTabContent();
          } else {
            this.$message.error(data.msg);
          }
        })
      },
      //tab页的内容
      changeTabContent(){
         if (this.tabActiveName=='first'){
           this.$nextTick(()=>{
             this.$refs.comment.commentList(this.userId)
           })
         }else if (this.tabActiveName=='second'){

         }
      },
      tabClick(tab, event){
        this.tabActiveName=tab.name;
        this.changeTabContent();
      },
      splitLabel(){
        this.labels=[];
        if (this.userInfo.label){
           this.labels=this.userInfo.label.split(",")
        }
      }
    },
    data() {
      return {
        userId:0,
        tabActiveName:'first',
        enums: global,
        userResources: [],
        matchSettings: [],
        userData: '',
        userInfo: '',
        userForm: [],
        labels:[],
        dialogFormVisible: false,
        formLabelWidth: '120px'
      }
    }
  }
</script>

<style scoped>

</style>
